<template >
    <div id="out_div" style="display: table; box-shadow: 0 0 3px #E0E0E0;">
      <p  class="title">恶劣天气轨道交通运行状态监测与预警平台</p>
<!--        <p style="float: left">现在位置{{}}相机</p>-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item class="meun-item" index="1" @click="toMap">全览</el-menu-item>
            <el-menu-item class="meun-item" index="2" @click="toCamera">机位库</el-menu-item>
            <el-menu-item class="meun-item" index="3" @click="toImg">图片库</el-menu-item>
<!--            <el-submenu class="meun-item" index="3">-->
<!--                <template slot="title" >图片库</template>-->
<!--                <el-menu-item index="2-1">定时图</el-menu-item>-->
<!--                <el-menu-item index="2-2">异物图</el-menu-item>-->
<!--                <el-menu-item index="2-3">雾图</el-menu-item>-->
<!--            </el-submenu>-->

            <el-menu-item class="meun-item" index="4" @click="toDataBase">图片数据库</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
  import API from '../../api'
  import Cookies from 'js-cookie'
  import PRO from '../../api/API_PRO.js'

    export default {
        name: "cliTitle",
        props: {
            pageIndex: {
                type: String
            },
        },

      data () {

        return {
          state:'',

          /**
           * 0是普通用户
           * 1是管理员
           * 2是评委
           * **/
          // roleType:Cookies.get('type'),
          activeIndex:this.pageIndex,
        }
      },

      methods: {
          getData(){
              API.finePoint().then(res=>{
                  if(res.code){
                      alert(res.message);
                      return;
                  }
                  this.finePoint = res
              }).catch(msg => {

                  alert(msg)
              })
          },
          toMap(){
              this.$router.push({path: `/main/map`})
          },
          toCamera(){
              this.$router.push({path: `/camera`})
          },
          toImg(){
              this.$router.push({path: `/foreign`})
          },
          toDataBase(){
              this.$router.push({path:`/database`})
          }

        }
    }
</script>

<style scoped>
  #out_div{
    width: 100%;
    height: 40px;
    top:0;
    background-color: #f0f0f0;
    z-index: 9999;
      line-height: 40px;
  }
    .el-menu-demo{
        float: right;
        height: 30px;
    }
    .meun-item{
        background-color: #f0f0f0;
        height: 40px;
        line-height: 40px;

    }
    .title{
        font-weight: bold;
        /*font-family:'FZYaSongS-B-GB'; */
        font-size: 23px;
        color: #000000;
        margin-left: 15px;
        float: left
    }
</style>
